<template>
<div class="dv1">{{ obj.message }}</div>
<div class="dv2">{{ message1 }}</div>
</template>

<script setup>
import {reactive,ref} from "vue";
let obj=reactive({message:"不畏浮云遮望眼"});
let message1 = ref('普通数据');
setTimeout(() =>{
    obj.message="一欲穷千里目，更上一层楼";
    message1.value="新的响应式数据"
}, 5000)
</script>

<style scoped>
.dv1{
    color:rgb(0, 255, 55);
    font-size: 30px;
    font-weight: bold; 
    }
    .dv2{
    color: red;
    font-size: 30px;
    font-weight: bold;
    }
</style>